<!--<style lang="less">
@import "./index.less"
</style>-->
<template>
  <div>
    <Row>
      <Col>
        <Card>
          <p slot="title">Spring Boot 2.x Actuator监控管理</p>
          <Row>
            <Table border :columns="columns" :data="data" ref="table"></Table>
          </Row>
        </Card>
      </Col>
    </Row>

    <!-- 添加编辑弹出框 -->
    <Modal
      :title="modalTitle"
      v-model="modelModalVisible"
      :mask-closable="false"
      :width="900"
      :fullscreen="full"
    >
      <div style="position:relative">
        <div v-if="!full" style="max-height:60vh; overflow:auto">
          <vue-json-pretty v-if="!full" :data="jsonData" :deep="deep" showLength />
        </div>
        <vue-json-pretty v-if="full" :data="jsonData" :deep="deep" showLength />
        <Spin fix v-if="loading" />
      </div>
      <div slot="footer">
        展开数据级数深度：
        <InputNumber :min="0" v-model="myDeep" @on-change="changDeep" style="margin-right:10px"></InputNumber>
        <Button @click="full =! full" type="primary" icon="md-expand">全屏开/关</Button>
        <Button @click="modelModalVisible=false">关闭</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import VueJsonPretty from 'vue-json-pretty'

export default {
  name: 'model-manage',
  components: {
    VueJsonPretty
  },
  data () {
    return {
      loading: false,
      columns: [
        {
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '功能名称',
          key: 'name',
          sortable: true
        },
        {
          title: 'URL',
          key: 'url',
          sortable: true
        },
        {
          title: '备注',
          key: 'description'
        },
        {
          title: '操作',
          key: 'action',
          width: 200,
          align: 'center',
          render: (h, params) => {
            if (
              !params.row.needPerm ||
              this.$route.meta.permTypes.includes('view')
            ) {
              return h('div', [
                h(
                  'Button',
                  {
                    props: {
                      type: 'primary',
                      size: 'small',
                      icon: 'md-eye'
                    },
                    style: {
                      marginRight: '5px'
                    },
                    on: {
                      click: () => {
                        this.showData(params.row)
                      }
                    }
                  },
                  '查看数据'
                )
              ])
            } else {
              return h('div', [
                h(
                  'Button',
                  {
                    props: {
                      size: 'small',
                      icon: 'ios-close-circle-outline'
                    },
                    style: {
                      marginRight: '5px'
                    },
                    on: {
                      click: () => {}
                    }
                  },
                  '您无权查看'
                )
              ])
            }
          }
        }
      ],
      data: [
        {
          name: '查看健康状态',
          url: '/health',
          needPerm: false // 不需要查看权限
        },
        {
          name: '查看应用信息',
          url: '/info',
          needPerm: false
        },
        {
          name: '查看环境变量',
          url: '/env',
          needPerm: true
        },
        {
          name: '查看metrics指标',
          url: '/metrics',
          needPerm: false
        },
        {
          name: '查看@Scheduled定时计划任务',
          url: '/scheduledtasks',
          needPerm: false
        },
        {
          name: '查看日志文件',
          url: '/logfile',
          description:
            '数据极多，最大10M，可能加载较慢甚至造成卡顿，网速不给力可能将加载超时',
          needPerm: true
        },
        {
          name: '查看最近100个请求',
          url: '/httptrace',
          description: '数据较多，可能加载较慢甚至造成卡顿',
          needPerm: true
        },
        {
          name: '查看审计事件信息',
          url: '/auditevents',
          description: '数据较多，可能加载较慢甚至造成卡顿',
          needPerm: true
        },
        {
          name: '查看线程栈',
          url: '/threaddump',
          description: '数据较多，可能加载较慢甚至造成卡顿',
          needPerm: true
        },
        {
          name: '查看所有URL映射列表',
          url: '/mappings',
          description: '数据较多，可能加载较慢甚至造成卡顿',
          needPerm: true
        },
        {
          name: '查看所有Spring Beans的完整列表',
          url: '/beans',
          description: '数据较多，可能加载较慢甚至造成卡顿',
          needPerm: true
        },
        {
          name: '查看配置类和自动配置类状态',
          url: '/conditions',
          description: '包含被应用或未被应用的原因，数据较多，可能加载较慢',
          needPerm: true
        },
        {
          name: '查看所有@ConfigurationProperties的属性集合列表',
          url: '/configprops',
          description: '数据较多，可能加载较慢甚至造成卡顿',
          needPerm: true
        },
        {
          name: '查看日志配置',
          url: '/loggers',
          description: '数据较多，可能加载较慢甚至造成卡顿',
          needPerm: true
        }
      ],
      modalTitle: '',
      modelModalVisible: false,
      full: false,
      deep: Infinity,
      myDeep: null,
      jsonData: {}
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
    init () {
    },

    /* **** 和后台交互代码区块 begin **** */
    showData (v) {
      console.log(this.$route.meta.permTypes)
      this.deep = Infinity
      this.myDeep = null
      this.modelModalVisible = true
      this.loading = true
      this.axios.getRequest('/actuator' + v.url).then(res => {
        this.loading = false
        this.jsonData = res
      })
      this.modalTitle = v.name + ' (搜索快捷键Ctrl+F)'
    },
    changDeep (v) {
      this.deep = v
    }

  }
}
</script>
